Using :hover with :not(:disabled) in CSS
You can style buttons on hover while excluding disabled buttons by combining the :hover pseudo-class with the :not() pseudo-class. This ensures the hover effect only applies to enabled buttons.
:hover– Targets an element when the user hovers over it.:not(:disabled)– Excludes elements that are disabled.Combining them ensures interactive styles are applied only to elements that can be interacted with.
In this example, hovering over the 'Submit' button changes its background to dark blue, but the disabled 'Cancel' button remains gray and unresponsive to hover.
Always indicate disabled state visually to improve accessibility.
Combine
:not(:disabled)with other pseudo-classes for interactive effects, like:focusor:active.Keep hover effects subtle to maintain good UX and avoid confusion.
Test across browsers for consistent behavior, as some older browsers may render styles differently.